import React from 'react';
import { Icon, List, WhiteSpace, WingBlank} from 'weaver-mobile';
import { Browser, BrowserHrm, Upload } from 'weaver-mobile-page'
import { withRouter } from 'react-router-dom';
import LevelList from '../levellist'

@withRouter
class FoldList extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      ...props
    }
  }

  componentWillMount() {

  }

  componentDidMount() {
    // 头部吸顶
    const { sticky } = this.state
    if (sticky) {
      let foldlists = document.getElementsByClassName("workrelate-mobile-foldlist-container")
      if (foldlists) {
        for (let i = 0; i < foldlists.length; i++) {
          let header = foldlists[i].children[0]
          header.style.position = "sticky"
          header.style.top = 0
        }
      }
    }
  }

  componentWillReceiveProps(newProps) {
    this.setState({ ...newProps, open: this.state.open })
    if (!newProps.sticky) {
      let foldlists = document.getElementsByClassName("workrelate-mobile-foldlist-container")
      if (foldlists) {
        for (let i = 0; i < foldlists.length; i++) {
          let header = foldlists[i].children[0]
          header.style.position = "relative"
        }
      }
    }
  }

  onAddBtnClick = (event) => {
    const { onAddIconClick } = this.state

    event.preventDefault()
    event.stopPropagation()

    if (typeof onAddIconClick === "function") {
      onAddIconClick()
    }
  }

  onOpenFoldClick = (event) => {
    const { open, onOpenFoldClick } = this.state

    this.setState({ open: !open })

    if (typeof onOpenFoldClick === "function") {
      onOpenFoldClick(!open)
    }
  }

  render() {
    const { data = [], comsbtn = [], showseq = true, open = false, showCheckbox = false, onCheckedChange,
      headColor = "#000", headIconclass, headIconsize = "xs", headIconStyle = {}, contentBgColor, bottomBorderColor, count,
      onItemClick, title, getChildren, hasMore, getMore, showGetMore, itemBottomOffset, 
      addIconIsBrowser = false, browser, addIconIsUploader = false, uploader, hasRight = true } = this.state

    return (
      <div className="workrelate-mobile-foldlist-container">
        <div className="header" onClick={this.onOpenFoldClick}>
          <div className="header-right">
            <div className="header-title">
              {
                headIconclass &&
                <span className="icon" style={headIconStyle}>
                  <Icon type={headIconclass} size={headIconsize} color={headColor} />
                </span>
              }
              <span className="text">
                {title}
              </span>
            </div>
            <div
              className="header-btn-wrapper"
              onClick={(e) => {
                if (addIconIsBrowser) {
                   hasRight && this.props.history.push(browser.store.path)
                } else if (addIconIsUploader) {
                  e.stopPropagation()
                } else {
                  this.onAddBtnClick(e)
                }
              }}
            >
              <span className="count" style={{ color: headColor, marginRight: hasRight ? 2 : 20 }}>
                {count >= 99 ? "99":count}
              </span>

              {
                hasRight &&
                <span className="plus-browser-wrapper">
                  {addIconIsBrowser &&
                    browser.com
                  }
                  {addIconIsUploader &&
                    uploader.com
                  }
                  <span className="plus" style={{ pointerEvents: addIconIsUploader ? "none" : "auto" }}>
                    <Icon type={"blog-shenqingguanzhu"} size="xxs" color={"#999"} />
                  </span>
                </span>
              }
            </div>
          </div>
        </div>
        {open &&
          <LevelList
            data={data}
            hasMore={hasMore}
            getMore={getMore}
            showGetMore={showGetMore}
            comsbtn={comsbtn}
            showseq={showseq}
            bgColor={contentBgColor}
            headColor={headColor}
            bottomBorderColor={bottomBorderColor}
            onItemClick={onItemClick}
            getChildren={getChildren}
            itemBottomOffset={itemBottomOffset}
            showCheckbox={showCheckbox}
            onCheckedChange={onCheckedChange}
          />
        }
      </div>
    )
  }
}

export default FoldList